{include "INC_header.html" title="文章管理"}
<div id="app-outlet" class="app-outlet padding">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <div class="app-container">
            <!-- 筛选 -->
            <header class="auto-height padding-bottom">
                <div class="border radius light-background">
                    <div class="ui flex-item padding border-bottom hover-background">
                        <div class="start justify-center" v-if="category.id > 0 && category.parents.length > 0">
                            <a-breadcrumb>
                                <template #separator>
                                    <i class="fa-solid fa-angle-right"></i>
                                </template>
                                <a-breadcrumb-item><a href="javascript:void(0);" @click="getCategoryList(0, true)">全部</a></a-breadcrumb-item>
                                <a-breadcrumb-item v-for="p in category.parents"><a href="javascript:void(0);" @click="getCategoryList(p.id, true)">{{ p.name }}</a></a-breadcrumb-item>
                                <a-breadcrumb-item>{{ category.name }}</a-breadcrumb-item>
                            </a-breadcrumb>
                        </div>
                        <div class="start">
                            <a-input-search
                                    v-model:value="keyword"
                                    placeholder="文章标题"
                                    enter-button="搜索"
                                    @search="setKeyword"
                            />
                        </div>
                        <div class="start" v-if="listQueryParams.keyword != ''">
                            <a-button type="primary" danger @click="setKeyword('')">
                                <template #icon><i class="fa fa-close margin-right-half"></i></template>
                                清除搜索
                            </a-button>
                        </div>
                        <div class="center"></div>
                        <div class="end">
                            <a-button type="primary" @click="editItem(null)">
                                <template #icon><i class="fa fa-plus margin-right"></i></template>
                                发布新文章
                            </a-button>
                        </div>
                    </div>
                    <div class="ui form padding-top">
                        <div class="border-bottom light-border ui flex-item padding-half" v-if="sites.length > 0">
                            <div class="start justify-center padding-left-half text-bold" style="height: calc(22px + var(--space-width));">站点</div>
                            <div class="center">
                                <div class="ant-checkbox-list">
                                    <a-checkbox v-model:checked="site.checked" v-for="site in sites" :value="site.id" @change="changeSiteId">{{ site.name }}</a-checkbox>
                                </div>
                            </div>
                            <div class="end justify-center padding-right-half" style="height: 32px;">
                                <a href="{url url='/cms/admin/site/list'}">管理</a>
                            </div>
                        </div>
                        <div class="border-bottom light-border ui flex-item padding-half" v-if="categoryList.length > 0">
                            <div class="start justify-center padding-left-half text-bold" style="height: calc(22px + var(--space-width));">分类</div>
                            <div class="center">
                                <a-button v-for="c in categoryList" size="small" :type="category.id == c.id ? 'primary' : ''" class="margin-half" @click="getCategoryList(c.id, true)">
                                    {{ c.name }}
                                </a-button>
                            </div>
                        </div>
                        <div class="border-bottom light-border ui flex-item padding-half" v-if="tags.length > 0">
                            <div class="start justify-center padding-left-half text-bold" style="height: calc(22px + var(--space-width));">标签</div>
                            <div class="center">
                                <!--
                                <div class="ant-checkbox-list">
                                    <a-checkbox v-model:checked="tag.checked" v-for="tag in tags" :value="tag.id" @change="changeTags">{{ tag.tag }}</a-checkbox>
                                </div>
                                -->
                                <a-select style="width: 100%;" mode="tags" option-label-prop="children" v-model:value="tagsValues" @change="changeTagsSelected">
                                    <a-select-option v-for="tag in tags" :value="tag.id">{{ tag.tag }}({{ tag.archives }})</a-select-option>
                                </a-select>
                            </div>
                        </div>
                        <div class="fields padding">
                            <div class="field">
                                <label class="label text-small">发布</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.state" size="small" button-style="solid" @change="getList">
                                        <a-radio-button value="all">全部</a-radio-button>
                                        <a-radio-button :value="1">是</a-radio-button>
                                        <a-radio-button :value="0">否</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">置顶</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.top" size="small" button-style="solid" @change="getList">
                                        <a-radio-button value="all">全部</a-radio-button>
                                        <a-radio-button :value="1">是</a-radio-button>
                                        <a-radio-button :value="0">否</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">回收站</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.recycle" size="small" button-style="solid" @change="getList">
                                        <a-radio-button value="all">全部</a-radio-button>
                                        <a-radio-button :value="1">是</a-radio-button>
                                        <a-radio-button :value="0">否</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">每页数量</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.total" size="small" button-style="solid" @change="getList">
                                        <a-radio-button :value="30">30</a-radio-button>
                                        <a-radio-button :value="50">50</a-radio-button>
                                        <a-radio-button :value="100">100</a-radio-button>
                                        <a-radio-button :value="200">200</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">上下页({{ list.page }}/{{ list.pages }})</label>
                                <div class="">
                                    <a-button size="small" @click="prevPage"><i class="fa-solid fa-caret-left margin-right-half"></i> 上一页</a-button>
                                    <a-button class="margin-left-half" size="small" @click="nextPage">下一页 <i class="fa-solid fa-caret-right margin-left-half"></i></a-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!-- 主体内容区 -->
            <main class="overflow-hidden flex-column">
                <div class="ui table scroll-enable primary selectable" v-if="list.rows > 0">
                    <!-- 表格头部 -->
                    <div class="thead">
                        <div class="ui row">
                            <div class="col"v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">{{ column.title }}</div>
                        </div>
                    </div>
                    <!-- 表格内容 -->
                    <div class="tbody">
                        <div class="ui row" v-for="(item, index) in list.list">
                            <div class="col justify-center" v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">
                                <template v-if="column.key === 'index'">{{ index+1 }}</template>
                                <template v-else-if="column.key === 'info'">
                                    <div class="ui flex-item">
                                        <div class="start" v-if="item.preview !='' && item.preview != null">
                                            <a-avatar :size="68" shape="square" :src="item.preview"></a-avatar>
                                        </div>
                                        <div class="center">
                                            <div class="text-bold"><a class="link-hover" :href="item.url" target="_blank">{{ item.title }} <i class="fa-solid fa-square-arrow-up-right margin-left-half"></i></a></div>
                                            <div v-if="item.description != '' && item.description != null" class="text-small max-two-line-text padding-top-half medium-text" style="line-height: 1.2em;">
                                                {{ item.description }}
                                            </div>
                                            <div class="" v-if="item.tagList.length > 0">
                                                <a-tag color="blue" class="margin-top" v-for="tag in item.tagList">{{ tag.tag }}</a-tag>
                                            </div>
                                            <div class="ui flex-item padding-top medium-text text-small">
                                                <div class="start">ID：<span class="orange-text">{{ item.id }}</span></div>
                                                <div class="start">发布人：<span class="orange-text">{{ item.userNickname || '管理员' }}</span></div>
                                                <div class="start justify-center">{{ item.good }}赞</div>
                                                <div class="start justify-center">{{ item.bad }}踩</div>
                                                <div class="start justify-center">{{ item.clicks }}阅读</div>
                                                <div class="center justify-center"></div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <div v-else-if="column.key === 'state' || column.key === 'top' || column.key === 'recycle'">
                                    <a-switch :checked="item[column.key] == 1" checked-children="是" un-checked-children="否" @change="itemSwitch(index, column.key)" />
                                </div>
                                <div class="text-small" v-else-if="column.key === 'time'">
                                    <i class="fa-solid fa-clock-rotate-left"></i> {{ item.updateTime }}
                                    <div class="padding-top-half"></div>
                                    <i class="fa-regular fa-clock"></i> {{ item.time }}
                                </div>
                                <div v-else-if="column.key === 'action'">
                                    <a-button type="primary" @click="editItem(item)">修改</a-button>
                                    <a-button class="margin-top"  danger @click="deleteItem(item.id)">删除</a-button>
                                </div>
                                <template v-else-if="column.dataIndex !== undefined">
                                    {{ item[column.dataIndex] || '' }}
                                </template>
                            </div>
                        </div>
                    </div>
                    <!-- 表格底部 -->
                    <div class="tfoot padding" v-if="list.pages > 1">
                        <div class="ui flex-item">
                            <div class="center">
                                {include "INC_page.html"}
                            </div>
                            <div class="end justify-center medium-text">共 {{ list.rows }} 行数据</div>
                        </div>
                    </div>
                </div>
                <div class="empty-content" v-else>
                    <a-empty :image="simpleImage" description="没有文章数据">
                        <div class="padding-top"></div>
                        <a-button type="primary" @click="editItem(null)">
                            <template #icon><i class="fa fa-plus margin-right"></i></template>
                            发布新文章
                        </a-button>
                    </a-empty>
                </div>
            </main>
        </div>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message, Empty, Modal } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                config: appProviderConfig,
                //空图片
                simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
                //表头
                columns: [
                    { width:'40px', title:"序号", key:"index" },
                    { title:"文章", key:"info" },
                    { width:'80px', title:"置顶", key:"top" },
                    { width:'80px', title:"发布", key:"state" },
                    { width:'80px', title:"回收站", key:"recycle" },
                    { width:'180px', title:"时间", key:"time" },
                    { width:'80px', title:"操作", key:"action" }
                ],
                //数据
                list: {
                    rows: 0,
                    page: 1,
                    pages: 0,
                    list: []
                },
                //列表参数
                keyword: '',
                listQueryParams: {
                    keyword: '',
                    state: 'all',
                    top: 'all',
                    recycle: 'all',
                    page: 1,
                    total: 30,
                    admin: 1,
                    siteId: '',
                    tags: ''
                },
                //站点列表
                sites: [],
                //可用标签
                tags: [],
                tagOptions: [],
                tagsValues: [],
                //可用分类筛选
                categoryList: [],
                //当前分类
                category: {
                    id: 0,
                    name: '',
                    parents: []
                }
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData: function () {
                //获取站点数据，用于筛选
                let self = this;
                const hide = message.loading("正在加载站点数据");
                axios.get("{url url='/cms/api/site/list'}", {
                    params: { admin:1, total: 50 }
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        let sites = data.data.list;
                        sites.map(site => {
                            site.checked = false;
                        });
                        self.sites = sites;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
                //获取筛选标签
                axios.get("{url url='/cms/api/tags/list'}", {
                    params: { admin:1, total: 500 }
                }).then(({ data }) => {
                    if (data.error === 0) {
                        let list = data.data.list;
                        let options = [];
                        list.map(tag => {
                            tag.checked = false;
                            options.push({ value: tag.id, title: tag.tag });
                        });
                        self.tags = list;
                        self.tagOptions = options;
                    }
                });
                //获取列表数据
                this.getList();
            },
            getCategoryList: function (parentId, getList){
                getList = getList || false;
                parentId = parentId || 0;
                let self = this;
                axios.get("{url url='/cms/api/category/list'}", {
                    params: {
                        parentId,
                        siteId: this.listQueryParams.siteId,
                        admin: 1
                    }
                }).then(({ data }) => {
                    if (data.data.length > 0) {
                        self.categoryList = data.data;
                    }
                });
                //获取当前分类
                if(parentId > 0)
                {
                    axios.get("{url url='/cms/api/category'}", {
                        params: {
                            id: parentId,
                            admin: 1
                        }
                    }).then(({ data }) => {
                        self.category = data.data;
                    });
                }
                else
                {
                    self.category = { cid: 0, parents: [] };
                }
                if(getList){
                    self.listQueryParams.categoryId = parentId;
                    self.listQueryParams.page = 1;
                    self.getList();
                }
            },
            //获取列表
            getList : function (){
                let self = this;
                const hide = message.loading("正在加载数据");
                axios.get("{url url='/cms/api/archive/list'}", {
                    params: this.listQueryParams
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
            },
            //首页
            firstPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = 1;
                    this.getList();
                }
            },
            //上一页
            prevPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = page - 1;
                    this.getList();
                }
            },
            //下一页
            nextPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = page + 1
                    this.getList();
                }
            },
            //最后一页
            lastPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = pages;
                    this.getList();
                }
            },
            //设置跳到第几页
            setPage : function (page, pageSize){
                page = isNaN(page) ? -1 : parseInt(page);
                page = page > 0 ? page : -1;
                if(page === -1){
                    message.error('参数错误');
                }else {
                    this.listQueryParams.page = page;
                    this.listQueryParams.total = pageSize || this.listQueryParams.total;
                    this.getList();
                }
            },
            //设置参数，重载列表
            setListQueryParam : function (params){
                //通过替换key值的方式
                for(let key in params){
                    this.listQueryParams[key] = params[key];
                }
                this.getList();
            },
            //搜索
            setKeyword: function (value){
                if(this.listQueryParams.keyword != value){
                    this.listQueryParams.keyword = value;
                    this.getList();
                }
                if (value == '') {
                    this.keyword = '';
                }
            },
            //清除搜索
            cleanKeyword: function (){
                this.keyword = '';
                this.listQueryParams.keyword = '';
                this.getList();
            },
            changeSiteId: function (_event) {
                const { checked, value } = _event.target;
                let values = this.listQueryParams.siteId;
                values = values === "" || values == null ? [] : values.split(",");
                if (checked) {
                    values.push(value.toString());
                } else {
                    if (values.indexOf(value.toString()) !== -1) {
                        //移除
                        values.splice(values.indexOf(value.toString()), 1);
                    }
                }
                this.listQueryParams.siteId = values.join(",");
                this.categoryList = [];
                this.getCategoryList(0, true);
                //this.setListQueryParam({ siteId: values.join(",") })
            },
            changeTags: function (_event) {
                const { checked, value } = _event.target;
                let values = this.listQueryParams.tags;
                values = values === "" || values == null ? [] : values.split(",");
                if (checked) {
                    values.push(value.toString());
                } else {
                    if (values.indexOf(value.toString()) !== -1) {
                        //移除
                        values.splice(values.indexOf(value.toString()), 1);
                    }
                }
                this.setListQueryParam({ tags: values.join(",") });
            },
            changeTagsSelected() {
                this.setListQueryParam({ tags: this.tagsValues.join(",") });
            },
            //删除站点
            deleteItem(id) {
                let self = this;
                Modal.confirm({
                    title: '确定要删除该文章吗?',
                    content: '链接删除后不可恢复，请谨慎操作！',
                    okText: '立即删除',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            axios.post("{url url='/cms/api/archive/delete'}", { id }).then(({ data }) => {
                                resolve();
                                if (data.error === 0) {
                                    self.getList();
                                    message.success(data.message);
                                } else {
                                    message.error(data.message);
                                }
                            }).catch(() => {
                                reject();
                            })
                        }).catch(() => console.log('Oops errors!'));
                    },
                    onCancel() {},
                });
            },
            //添加、编辑文章
            editItem(_item) {
                window.location.href = "{url url='/cms/admin/archive/edit'}" + (_item ? ("?id=" + _item.id) : '');
            },
            itemSwitch(index, name) {
                let id = this.list.list[index].id;
                let self = this;
                axios.post("{url url='/cms/api/archive/switch'}", { id, name }).then(({ data }) => {
                    if (data.error === 0) {
                        self.list.list[index][name] = self.list.list[index][name] == 1 ? 0 : 1;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent.length > 0) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"文章管理" }
            ]
        });
    }
</script>
{include "INC_footer.html"}